<template>
<div class="simple-case">
  <div class="simple-list before">
    <div class="simple-list-head">
      <div class="title"><strong>案件发生前</strong>同类案件</div>
      <div class="time">2018年07月30日 21:00</div>
    </div>
    <div class="simple-list-body">
      <el-table height="100%" style="width: 100%" :data="beforeList">
        <el-table-column v-for="(item, index) in columns" 
        :key="index" :prop="item.prop" 
        :label="item.label">
          <template slot-scope="scope">
            <div class="grid" v-if="item.prop == 'day'">
              <el-tag size="mini">{{ scope.row.day }}天</el-tag>
            </div>
            <div class="grid" v-else>
              {{scope.row[item.prop]}}
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
  <div class="simple-list after">
    <div class="simple-list-head">
      <div class="title"><strong>案件发生前</strong>同类案件</div>
      <div class="time">2018年07月30日 21:00</div>
    </div>
    <div class="simple-list-body">
      <el-table height="100%" style="width: 100%" :data="afterList">
        <el-table-column v-for="(item, index) in columns" 
        :key="index" :prop="item.prop" 
        :label="item.label">
          <template slot-scope="scope">
            <div class="grid" v-if="item.prop == 'day'">
              <el-tag size="mini">{{ scope.row.day }}天</el-tag>
            </div>
            <div class="grid" v-else>
              {{scope.row[item.prop]}}
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</div>
</template>

<style lang="scss" scoped>
@import "../../../../../src/style/variables/_default.scss";
.simple-case{
  display: flex;
  flex-flow: row nowrap;
  width: 100%; 
  height: 100%;
  padding: 10px 0;
  justify-content: space-around;
  .simple-list{
    flex: 0 0 48%;
    width: 48%;
    height: 100%;
    border: 1px solid $--border-color-base;
    &-head{
      display:flex;
      align-items: center;
      height: 34px;
      border-bottom: 1px solid $--border-color-base;
      .title{
        flex: 1;
        border-left: 1px solid red;
        & > strong{
          padding-left: 5px;
          color: red;
        }
      }
      .time{
        flex: 1;
        padding-right: 10px;
        text-align: right;
      }
    }
    
  }
}

</style>

<script>
export default {
  name: 'simpleCase',
  components: {
  },
  props: {
    tab: {
      type: Object,
      default: () => { return {} }
    }
  },
  data() {
    return {
      beforeList: [
        {day: 3, district: 20, city: 40, province: 60},
        {day: 3, district: 20, city: 40, province: 60},
        {day: 3, district: 20, city: 40, province: 60},
        {day: 3, district: 20, city: 40, province: 60}
      ],
      afterList: [
        {day: 3, district: 20, city: 40, province: 60},
        {day: 3, district: 20, city: 40, province: 60},
        {day: 3, district: 20, city: 40, province: 60},
        {day: 3, district: 20, city: 40, province: 60}
      ],
      columns: [
        {prop: 'day', label: '时间'},
        {prop: 'district', label: '本分局'},
        {prop: 'city', label: '本市'},
        {prop: 'province', label: '本省'}
      ]
    }
  },
  watch: {
    
  },
  methods: {
    
  },
  mounted() {
  }
}
</script>

